//es6的代码，太高级了。浏览器解析不了 这个时候可以通过webpack编译成浏览器可识别的代码
import $ from 'jquery'

//使用import语法，导入css样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'

//注意：如果要通过路径的形式，去引用node-modules中相关的文件，可以直接省略路径前面的node-modules这一层目录，
//直接写包的名称，然后后面跟上具体的文件路径
//不写node-modules这一层目录，默认就会去node-modules中查找
import 'bootstrap/dist/css/bootstrap.css'

$(function() {
	console.log('1234')
	$('li:odd').css('background', 'orange')
})

//class关键字，是es6中提供的新语法，是用来实现es6中面向对象编程的方式
class Person {
	//使用static关键字可以定义静态属性
	//所谓的静态属性就是可以通过类名访问的属性，Person.info
	//实例属性：只能通过类的实例来访问的属性
	static info = {name: 'zs', age: 20}
}

//访问Person类身上的静态属性
console.log(Person.info)

//在webpack中,默认只能处理一部分es6的新语法,一些高级的es6或者es7语法，
//webpack是处理不了的；这时候就需要借助第三方的loader来帮助webpack处理这些高级的语法
//当第三方loader把高级语法换为低级的语法之后，会把结果交给webpack去打包bundle.js中
//通过Babel可以帮我们将高级的语法转换为低级的语法
//1.在webpack中可以运行如下两套的命令，安装两套包，全装Babel相关的loader功能：
//1.1第一套：npm i babel-core babel-loader babel-plugin-transform-runtime -D
//1.2第二套: npm i babel-preset-env babel-preset-stage-0 -D
//2.打开webpack的配置文件中,在module节点下的rules数组中,添加一个新的匹配规则：
//2.1{test: /.\js$/, use: 'babel-loader', exclude: /node_modules/}
//2.2注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉:原因有俩
//2.2.1如果不排除node_modules，则Babel会把node_modules中的所有第三方JS文件都打包编译，这样会消耗CPU同时打包速度会非常慢
//2.2.2哪怕最终Babel把所有的node_modules中的JS转换完毕了但是项目也无法正常运行
//3.在项目的根目录中新建一个叫做.babelrc的Babel配置文件， 这个配置文件，属于JSON格式，所以.babelrc配置的时候，必须符合JSON语法规范：不能写注释,字符串必须用双引号
//3.1在.babelrc中写如下的配置：
// {
// 	"preset": ["env", "stage-0"], //预设
// 	"plugins": ["transform-runtime"]
// }

// function Animal(name) {
// 	this.name = name
// }
// Animal.info = 123
// var a1 = new Animal('小花')

// //这是静态属性：
// console.log(Animal.info)
// //实例属性
// console.log(a1.name)